// 面向对象 ======== 封装、继承、多态

/**
 *  ..............................................数据逻辑
 */
// 商品对象
class Goods {
	constructor(goods) {
		this.goods = goods;
		this.chooseNum = 0; //商品数量
	}
	// 获取商品的总价
	getAmountPrice() {
		return this.chooseNum * this.goods.price;
	}
	// 添加购买商品的数量
	increse() {
		this.chooseNum++;
	}
	// 减少购买商品的数量
	decrese() {
		if (this.chooseNum <= 0) {
			return;
		}
		this.chooseNum--;
	}
}

// 界面数据对象
class UiData {
	constructor() {
		const goodsList = [];
		goods.forEach(val => {
			const goods = new Goods(val);
			goodsList.push(goods);
		})
		this.goodsList = goodsList;
		// 配送费
		this.freight = 5;
		// 起送价
		this.freightThreshold = 30;
	}
	// 获取所有商品的总价
	getAmountPrice() {
		let sumPrice = 0;
		this.goodsList.forEach(val => {
			sumPrice += val.getAmountPrice();
		})
		return sumPrice;
	}
	// 获取,到起送价的金额
	getFreightThreshold() {
		const amountPrice = this.getAmountPrice();
		return this.freightThreshold - amountPrice;
	}
	// 是否达到起送价
	isOverThreshold() {
		return this.getFreightThreshold() < 0;
	}
	// 获取所有选中商品的数量
	getAllChoosedNum() {
		let sunNum = 0;
		this.goodsList.forEach(val => {
			sunNum += val.chooseNum;
		})
		return sunNum;
	}
	// 是否有选中商品
	isChoosedGoods() {
		return this.getAllChoosedNum() > 0;
	}
	// 增加购买数量
	increse(index) {
		this.goodsList[index].increse();
	}
	// 减少购买量
	decrese(index) {
		this.goodsList[index].decrese();
	}

}

/**
 * ..............................................界面逻辑
 */
class UI {
	constructor() {
		this.uiData = new UiData();
		// 需要用到的dom对象
		this.doms = {
			goodsList: document.querySelector('.goods-list'), // 商品界面dom
			footerCar: document.querySelector('.footer-car'), 
			footerPay: document.querySelector('.footer-pay'),
			carTotal: document.querySelector('.footer-car-total')
		}
		// 添加图标跳跃终止位置
		const rect = this.doms.footerCar.getBoundingClientRect()
		this.endPoint = {
			x:rect.x + rect.width / 2,
			y:rect.y + rect.height / 2
		}
		this.initPage();
		this.setLiteneEvent()
	}
	setLiteneEvent(){
		this.doms.footerCar.addEventListener('animationend',function(){
			this.classList.remove('animate')
		})
	}
	// 初始化页面
	initPage() {
		let html = "";
		this.uiData.goodsList.forEach( (val,index) => {
			const goods = val.goods;
			html += `<div class="goods-item">
					<img src="${goods.pic}" alt="" class="goods-pic" />
					<div class="goods-info">
						<h2 class="goods-title">${goods.title}</h2>
						<p class="goods-desc">${goods.desc}</p>
						<p class="goods-sell">
							<span>月售 ${goods.sellNumber}</span>
							<span>好评率${goods.favorRate}%</span>
						</p>
						<div class="goods-confirm">
							<p class="goods-price">
								<span class="goods-price-unit">￥</span>
								<span>${goods.price}</span>
							</p>
							<div class="goods-btns">
								<i index="${index} class="iconfont i-jianhao"></i>
								<span>${val.chooseNum}</span>
								<i index="${index}" class="iconfont i-jiajianzujianjiahao"></i>
							</div>
						</div>
					</div>
				</div>
			`
		})
		this.doms.goodsList.innerHTML = html;
	}
	// 更新商品界面状态
	refreshGoodsItem(index){
		const goodsItem = this.doms.goodsList.children[index];
		if(this.uiData.goodsList[index].chooseNum > 0){
			goodsItem.classList.add('active');
		}else{
			goodsItem.classList.remove('active');
		}
		const chooseNumDom = goodsItem.querySelector(".goods-btns span");
		chooseNumDom.textContent = this.uiData.goodsList[index].chooseNum;
	}
	// 更新页脚状态
	refreshFooter(){
		// 是否选择了商品
		const num = this.uiData.getAllChoosedNum();
		if(num > 0){
			const span = this.doms.footerCar.querySelector('.footer-car-badge');
			span.textContent = num;
			this.doms.footerCar.classList.add('active');
		}else{
			this.doms.footerCar.classList.remove('active');
		}
		// 是否达到了起送价
		if(this.uiData.isOverThreshold()){
			this.doms.footerPay.classList.add('active');
		}else{
			const span = this.doms.footerPay.querySelector('span');
			span.textContent = `还差￥${ui.uiData.getFreightThreshold().toFixed(0)}元起送`;
			this.doms.footerPay.classList.remove('active');
		}
		this.doms.carTotal.textContent = this.uiData.getAmountPrice().toFixed(2)
	}
	// 添加商品
	increse(index){
		this.uiData.goodsList[index].increse();
		this.refreshGoodsItem(index);
		this.refreshFooter();
		this.addIconJump(index);
	}
	// 减少商品
	decrese(index){
		this.uiData.goodsList[index].decrese();
		this.refreshGoodsItem(index);
		this.refreshFooter();
	}
	// 添加商品时图标动画
	addIconJump(index){
		// 创建添加商品图标
		const div = document.createElement('div');
		div.className = 'add-to-car';
		const i = document.createElement('i');
		i.className = 'iconfont i-jiajianzujianjiahao';
		div.appendChild(i)
		document.body.appendChild(div);
		// 初始化图标的起点位置
		const itemDom = this.doms.goodsList.children[index];
		const icon = itemDom.querySelector('.i-jiajianzujianjiahao');
		// 获取对象位置相关属性
		const rect = icon.getBoundingClientRect();
		const startPoint ={
			x:rect.x + rect.width / 2,
			y:rect.y + rect.height / 2
		}
		div.style.transform = `translateX(${startPoint.x}px)`;
		i.style.transform = `translateY(${startPoint.y}px)`;
		div.appendChild(i);
		document.body.appendChild(div);
		// 强行渲染
		div.clientWidth;
		// 设置终点位置
		div.style.transform = `translateX(${this.endPoint.x}px)`;
		i.style.transform = `translateY(${this.endPoint.y}px)`;
		// 监听当前动画执行完成
		const that = this;
		div.addEventListener('transitionend',function(){
			div.remove()
			that.doms.footerCar.classList.add('animate')
		})
	}
}

const ui = new UI();

ui.doms.goodsList.addEventListener('click',function(e){
	// 获取加号的下标，并且强转为数字
	const index = +e.target.getAttribute('index')
	if(e.target.classList.contains('i-jiajianzujianjiahao')){
		ui.increse(index)
	}else if(e.target.classList.contains('i-jianhao')){
		ui.decrese(index)
	}
})
